<template>
	<view class="box_content">
		<view class="title"> 星河 </view>
		<view class="tabs_box1">
			<view class="check_item" :class="currentIndex == index ? 'check_in' :''" v-for="(item,index) in tabsList"
				@click="handClick(index)">
				{{item}}
			</view>
		</view>
		<view class="" style="width: 100%;height: 534rpx;">
			<starList :isWhite="true" :list="{ data: list }"></starList>
		</view>
		<view class="box_btn" @click="toUpdate">
			<view> 查看更多 </view>
		</view>
	</view>
</template>

<script>
	import {
		xingqiuHome
	} from '@/common/api/start.js'
	import starList from "@/components/starList.vue"; //星河
	export default {
		data() {
			return {
				tabsList: ['按上架时间', '按热度'],
				currentIndex: 0,
				newList:[],
				hotList:[],
				list:[]
			}
		},
		components:{
			starList
		},
		created() {
			xingqiuHome({
				
			}).then(res => {
				// console.log('resssssss',res);
				// this.list = res.data.hot;
				this.hotList = res.data.hot;
				this.newList = res.data.new;
				this.list = res.data.new;
			})
		},
		methods:{
			handClick(index) {
				this.currentIndex = index;
				if (index == 0) {
					this.list = this.newList;
				} else {
					this.list = this.hotList;
				}
			},
			toUpdate() {
				uni.navigateTo({
					url:"/pages/distinguish/galaxy"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box_content {
		width: 100%;
		height: 901rpx;
		background: rgba(39,39,39,0.5);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 0 30rpx;
		margin-top: 32rpx;
		box-sizing: border-box;
		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			color: #eee;
			padding: 32rpx 0 24rpx 0;
			box-sizing: border-box;
		}
	}
	.tabs_box1 {
		width: 100%;
		padding: 24rpx 0 32rpx;
		box-sizing: border-box;
		display: flex;
	
		.check_item {
			padding: 7rpx 30rpx;
			background: rgba(39, 39, 39, 0.5);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			margin-right: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ADADAD;
	
		}
	
		.check_in {
			background: #55B877;
			color: #fff;
		}
	}
	.box_btn {
		width: 100%;
		padding: 0 30rpx 30rpx 30rpx;
	
		box-sizing: border-box;
	
		view {
			width: 100%;
			height: 96rpx;
			background: #272c29;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			color: #eeeeee;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>